<script setup lang="ts">
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';

defineProps<{
  content: string;
}>();
const content = `**一、MCP介绍**

![](https://air-note.oss-cn-shenzhen.aliyuncs.com/mark-down/2025-04-16/29cb71853b65406b9a91c81f5573868a.GIF)

简单来说，MCP是Model Context Protocol（模型上下文协议）的缩写，它是一种新的技术标准，配置之后，你就可以直接和模型说需求，模型会根据具体情况自己去找能实现需求的各种MCP Server来搞定问题：

![](https://air-note.oss-cn-shenzhen.aliyuncs.com/mark-down/2025-04-16/2eefebd7ceb246e090b52a727af807ad.png)

MCP有两个关键特性：
1. 开源：这意味着任何人都可以基于这个协议开发自己的服务，生态会越来越丰富。就像安卓系统开源后，各种App如雨后春笋般涌现。

2. 一次封装，全球可用：服务提供商只需要按照MCP标准封装一次自己的API，就可以被所有支持MCP的大模型调用。这大大降低了接入成本，促进了生态繁荣。

正是这两个特性，使得越来越多的科技巨头开始拥抱MCP。国内的阿里、腾讯、百度、字节、360等公司都已经或即将推出MCP相关产品。

**二、MCP使用**

MCP使用需要MCP服务器和MCP客户端，服务器以mysql-mcp-server进行测试，客户端使用cherrystudio
1.首先，我们需要先下载一个客户端：cherrystudio
可以去[cherrystudio官网](https://cherry-ai.com/download)下载
也可以去以下链接下载打包好的客户端和必要的uv/bun安装包：https://pan.quark.cn/s/5a210dc1d0b5

2.一步一步安装好cherrystudio软件，打开软件，点击左下角的 **设置** - **MCP服务器**，点击右上角的红色感叹号，点击里面的安装uv和bun,如果安装成功，则会看到绿色打钩标志，如果不成功需要将uv.exe和bun.exe放置到圈出来的位置（以自己的位置为准）：
![](https://air-note.oss-cn-shenzhen.aliyuncs.com/mark-down/2025-04-16/0c2c381e04804229a5e9c349100be8b4.png)

3.添加mysql-mcp-server服务器
可以去 MCP空间站（https://mcpspace.cn）搜索自己需要的服务器，这里以mysql-mcp-server为例，以npm的方式安装（需要安装好node环境并配置好环境变量）：
配置规则如下：
\`\`\`json
{
  "mcpServers": {
    "mysql": {
      "command": "npx",
      "args": ["mysql-mcp-server"],
      "env": {
        "MYSQL_HOST": "你的MySQL主机",
        "MYSQL_PORT": "3306",
        "MYSQL_USER": "你的MySQL用户名",
        "MYSQL_PASSWORD": "你的MySQL密码",
        "MYSQL_DATABASE": "你的默认数据库"
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}
\`\`\`

![](https://air-note.oss-cn-shenzhen.aliyuncs.com/mark-down/2025-04-16/3d2293b5425a431ebeca81d4cab06199.png)

**开始配置：**

3.1 点击设置 - MCP服务器 - 添加服务器
输入名称，描述（可选）,类型选择标准输入输出，命令填写 npx ，包管理源选择默认，参数填写 mysql-mcp-server，环境变量填写自己的数据库信息（客户端与数据库网络可达）包括IP，端口，用户，密码和默认数据库，填写完成点击右上角的保存，就成功创建了mysql-mcp-server，下面的可用工具可以看到具体的功能：列出库名、表名、描述表和执行查询
![](https://air-note.oss-cn-shenzhen.aliyuncs.com/mark-down/2025-04-16/6e9c77f5cfe548cb8cb0401763b85fd9.png)

3.2 配置支持MCP功能的对话大模型
这里以阿里的百炼大模型为样例，开通即赠送百万tokens，开通地址：https://bailian.console.aliyun.com/?tab=model
获取方式：登录后，点击左下角的API-Key创建API-Key即可，保存好api-key下面会用到
回到cherrystudio进行配置：
点击设置 - 模型服务 - 阿里云百炼，右边填写上述自己创建的API秘钥，可点击检查进行状态确认，API地址不需要修改，下面会出现模型，只要出现带扳手图标的模型都可以用作MCP对话，点击右上角的打开开关（务必打开），对话大模型就配置好了
![](https://air-note.oss-cn-shenzhen.aliyuncs.com/mark-down/2025-04-16/1b637f09b98541f686d8dcd5281de83d.png)

3.3 对话测试
回到左上角的聊天对话框，在输入框处点击代码符号选择刚才创建的mysql-mcp-server,选中后会变绿色表示启用
![](https://air-note.oss-cn-shenzhen.aliyuncs.com/mark-down/2025-04-16/36be940fd6ca4a439618eeb7d71db082.png)

点击上方选择对话模型，默认是硅基流动的，我们选择刚才配置的百炼大模型或者自己配置好的大模型，这里要选择带扳手图标的模型才支持MCP
![](https://air-note.oss-cn-shenzhen.aliyuncs.com/mark-down/2025-04-16/ba608e9edc8c4cc4a731377092fce44f.png)

下面就可以开始对话了，咨询问题：data_protection库里面有多少张表？ 可以看到AI调用list_tables工具进行了查询并进行回答
![](https://air-note.oss-cn-shenzhen.aliyuncs.com/mark-down/2025-04-16/3611cb6596554e44ade95b509814637d.png)

如需其他MCP服务器或客户端，可以访问全中文MCP空间站（mcpspace.cn）获取相关资料，可clone，可ssh，可github，可中文阅读，可下载仓库包！

![](https://air-note.oss-cn-shenzhen.aliyuncs.com/mark-down/2025-04-16/261c383511224a448476058932fd8978.png)

除了cherrystudio客户端以外，还可以使用cursor编译器、claude桌面端、cline插件或者其他开源产品作为客户端使用MCP服务器功能。`
</script>

<template>
  <div class="markdown-container">
    <MdPreview :modelValue="content" />
  </div>
</template>

<style scoped>
.markdown-container {
  padding: 20px;
  background-color: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

:deep(.md-preview) {
  --md-bk-color: var(--el-bg-color);
  --md-code-bk-color: var(--el-fill-color-light);
  --md-hover-color: var(--el-color-primary-light-9);
  --md-border-color: var(--el-border-color);
  --md-text-color: var(--el-text-color-primary);
  --md-title-color: var(--el-text-color-primary);
  --md-link-color: var(--el-color-primary);
}

:deep(.md-preview h1),
:deep(.md-preview h2),
:deep(.md-preview h3),
:deep(.md-preview h4),
:deep(.md-preview h5),
:deep(.md-preview h6) {
  margin-top: 1.5em;
  margin-bottom: 1em;
  font-weight: 600;
  line-height: 1.25;
}

:deep(.md-preview p) {
  margin: 1em 0;
  line-height: 1.6;
}

:deep(.md-preview code) {
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

:deep(.md-preview pre) {
  padding: 1em;
  border-radius: 6px;
  margin: 1em 0;
}

:deep(.md-preview blockquote) {
  margin: 1em 0;
  padding: 0.5em 1em;
  border-left: 4px solid var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
}
</style>